<template>
  <center>
    <div>
      <h1 style="margin-left: -10%">
        <span v-if="radio_select===1">科研人员登陆界面</span>
        <span v-if="radio_select===2">管理员登陆界面</span>
      </h1>

      <el-form style="margin-left: -15%"
          :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
        <el-form-item label="用户名" prop="user">
          <el-input type="username" v-model="ruleForm.user" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>

        <el-radio-group v-model="radio_select">
          <el-radio :label="1">科研人员</el-radio>
          <el-radio :label="2">管理员</el-radio>
        </el-radio-group>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </center>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: "Login",
  data() {

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    const validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    return {
      radio_select: 1,
      ruleForm: {
        user: '',
        pass: '',
      },
      rules: {
        user: [
          {validator: validateUser, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {

      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          get('/login', {
              username: that.ruleForm.user,
              password: that.ruleForm.pass
            }).then(function (res) {

              if (res.code === 1) {
                sessionStorage.setItem("role",res.data.role);
                let router_target = "MyProject";

                if (res.data.role==="datamanager"){
                  router_target = "dataManage";
                }

                if (res.data.role==="logger"){
                  router_target = "doLog";
                }

                let role_a = res.data.role==="datamanager"
                    ||res.data.role==="checker"
                    ||res.data.role==="logger";
                if (that.radio_select===1&&role_a){
                  ElMessage.error({
                    showClose: true,
                    message: "登陆失败，您没有科研人员权限",
                    type: "error",
                    center: true
                  })
                  return
                }

                that.$router.push({
                  name: router_target
                })

                ElMessage.success({
                  showClose: true,
                  message: "登陆成功，欢迎您 " + res.data.username,
                  type: "success",
                  center: true
                })
              } else {
                ElMessage.warning({
                  showClose: true,
                  message: "登陆失败,用户名或密码错误",
                  type: "warning",
                  center: true
                })
              }

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}

</script>

<style scoped>

.ruleForm {
  margin-top: 100px;
  width: max-content;
}
</style>